<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini" label-width="80px">
        <el-form-item label="创建时间:">
          <el-date-picker style="width:173px" v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" placeholder="选择日期时间"></el-date-picker>
          -
          <el-date-picker style="width:173px" v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="用户ID:">
          <el-input v-model="q.user_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="代理账号:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属总代:">
          <el-select v-model="q.parent_id" clearable filterable placeholder="请输入所属总代">
            <el-option v-for="item of AgencyMainList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属商户:">
          <el-select v-model="q.mch_id" clearable placeholder="请选择">
            <el-option v-for="item in MerchantsList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit
              highlight-current-row>
      <el-table-column prop="agency_nickname" label='代理账号' sortable width="200">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="user_id" label='用户ID' width="120"></el-table-column>
      <el-table-column prop="parent_name" label='所属总代' width="200">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column>
      <el-table-column prop="mch_name" label='所属商户' sortable width="200">
        <template slot-scope="scope">{{scope.row.mch.name}}</template>
      </el-table-column>
      <!--      <el-table-column prop="id" label='ID' width="100"></el-table-column>-->
      <!--      <el-table-column prop="mch_id" label='商户ID' width="100"></el-table-column>-->
      <el-table-column prop="created_at" label='创建时间' sortable width="180"></el-table-column>
      <el-table-column prop="updated_at" label='更新时间' sortable width="180"></el-table-column>
      <el-table-column prop="remark" label='备注信息' sortable width="500"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {queryFilter} from '@/utils/patch'
  import {getMerchantsList, getBlackList,getAgencyList} from '@/api'

  export default {
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        showUpdate: false,
        show_id: null,
        MerchantsList: [],
      AgencyMainList: [],
      AgencyList: [],
      }
    },
    activated() {
      this.getList()
      this.getAgencyInfo()
    this.getAgencyList()
    this.getChildAgencyList()
    },
    deactivated() {
      this.listLoading = false
    },
    methods: {
      getAgencyInfo() {
        getMerchantsList().then(res => {
          if (res.status === 0) {
            this.MerchantsList = res.data.items
          }
        })
      },
      add() {
        this.show_id = null
        this.showUpdate = true
      },
      update(row) {
        this.show_id = row.id
        this.showUpdate = true
      },
      remove() {
      },
      query() {
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
      getList() {
        this.q = queryFilter(this.q);
        getBlackList(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>

